import { getDataKeep, saveDataKeep } from "@/api/modules/system/system";
import { showTips } from "@/utils/util";

export default defineComponent({
	setup() {
		const state = reactive<any>({
			dataKeep: {
				default: "",
				keep: ""
			}
		});

		onMounted(() => {
			initDataKeep();
		});
		const initDataKeep = async () => {
			let { result, success } = await getDataKeep({});
			if (success) {
				state.dataKeep = result;
			}
		};

		const validateKeep = (rule: any, value: any, callback: any) => {
			if (value === "") {
				callback(new Error("租户限存不能为空"));
			} else {
				if (state.dataKeep.default < value || value < 0) {
					callback(new Error("租户限存时间错误"));
				} else {
					callback();
				}
			}
		};

		const rules = reactive({
			keep: [{ validator: validateKeep, trigger: "change" }]
		});
		const saveKeep = async () => {
			let { code, message } = await saveDataKeep({ keep: Number(state.dataKeep.keep) });
			let ok = showTips(code, "存储配置", message);
			if (ok) initDataKeep();
		};

		return () => {
			return (
				<div class="bg-white pl-8 pr-8 pt-2 ">
					<div class="block-title border-bottom">
						<div>
							数据存储
							<el-tooltip content="按租户的数据存储时限（包括设备历史数据、文件、数据统计、操作日志、告警通知等）">
								<span class="iconfont iconinfo pl-2 font-thin" />
							</el-tooltip>
						</div>
					</div>
					<div class="p-4 mt-4">
						<el-form label-width="120px" rules={rules} model={state.dataKeep}>
							<el-form-item label="默认限存" prop="default">
								<div class="flex">
									<el-input v-model={state.dataKeep.default} disabled />
									<span class="pl-2">天</span>
								</div>
							</el-form-item>
							<el-form-item label="租户限存" prop="keep">
								<div class="flex">
									<el-input v-model={state.dataKeep.keep} />
									<span class="pl-2">天</span>
								</div>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" onClick={saveKeep}>
									保存
								</el-button>
							</el-form-item>
						</el-form>
					</div>
				</div>
			);
		};
	}
});
